<template>
	<div id="address-list">
		<div v-if="!addresses.length" class="no-address">
            <span class="iconfont icon-shouhuodizhi"></span>
            <p>您还没有添加收货地址</p>
        </div>
		<div class="addresses">
            <div v-for="(item, index) in addresses" class="address" :key="item.id">
                <div class="info">
                    <span class="pull-left">{{item.accept_name}}</span>
                    <span class="pull-right">{{item.mobile}}</span>
                </div>
                <div class="full-address">收货地址 : {{item.province_region ? item.province_region.name : ''}}
                {{item.city_region ? item.city_region.name : ''}}
                {{item.area_region ? item.area_region.name : ''}}
                {{item.address}}</div>
                <div class="clearfix">
                	<el-checkbox v-if="showSelect" class="select" v-model="item.checked" @change="onSelect(item, $event.target.value)"></el-checkbox>	
                </div>
                <div class="footer">
                    <el-switch
                        v-model="item.is_default"
                        :disabled="item.is_default == 1"
                        on-text=""
                        off-text=""
                        on-color="#b21014"
                        on-value="1"
                        off-value="0"
                        @change="set_default(index)">
                    </el-switch> 设为常用地址
                    <div class="pull-right">
                        <span @click="editAddress(item)">
                            <i class="iconfont icon-bianji"></i> 编辑
                        </span>
                        <span @click="deleteAddress(index)"><i class="iconfont icon-shanchu"></i> 删除</span>
                    </div>
                </div>
            </div>
        </div>
	</div>
</template>

<script>
export default {
	props: {
		addresses: Array,
		set_default: {
			type: Function,
			default: function () {}
		},
		editAddress: {
			type: Function,
			default: function () {}
		},
		deleteAddress: {
			type: Function,
			default: function () {}
		},
		showSelect: {
			type: Boolean,
			default: false
		},
		showEdit: {
			type: Boolean,
			default: true
		}
	},
	methods: {
		onSelect (item, value) {
			this.$set(item, 'checked', value);
			this.$emit('select', item);
		}
	}
}
</script>

<style scoped>
.no-address {
    text-align: center;
    vertical-align: middle;
    font-size: 0.32rem;
    color: #606060;
    line-height: 1.5;
    padding-top: 3.6rem;
}

.no-address .icon-shouhuodizhi {
    font-size: 80px;
}

.address {
    margin-bottom: 15px;
    font-size: 15px;
    width: 100%;
    border-bottom: 5px solid #e7e7e7;
}

.address .info {
    padding: 10px;
    overflow: hidden;
}

.address .full-address {
    padding: 10px;
}

.address .footer {
    border-top: 1px solid #eaeaea;
    padding: 10px;
    color: #333;
}

.address .select {
	float: right;
	margin-right: 15px;
	margin-bottom: 10px;
}
</style>